<template>
  <div class="common-table" v-if="options">
    <el-table
      style="width: 100%"
      :data="data"
      :max-height="options.height"
      :stripe="options.isStripe"
      :border="options.isBorder"
      :highlight-current-row="options.isHighlightCurrentRow"
      :row-style="options.rowStyle"
      :cell-style="options.cellStyle"
      :header-row-style="options.headerRowStyle"
      :header-cell-style="options.headerCellStyle"
      v-loading="options.isLoading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand" fixed="left" v-if="expandColumn">
        <template v-if="expandColumn.type == 'table'">
          <el-table
            :stripe="options.isStripe"
            :border="options.isBorder"
            :highlight-current-row="options.isHighlightCurrentRow"
            :row-style="options.rowStyle"
            :cell-style="options.cellStyle"
            :header-row-style="options.headerRowStyle"
            :header-cell-style="options.headerCellStyle"
          >
            <template v-for="column in expandColumn.columus">
              <el-table-column
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :sortable="column.hasSort"
                v-if="column.isShow"
              ></el-table-column>
            </template>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" fixed="left" v-if="options.hasSelection"></el-table-column>
      <el-table-column
        type="index"
        :label="options.lableIndex"
        width="55"
        fixed="left"
        v-if="options.hasIndex"
      ></el-table-column>
      <template v-for="column in columns">
        <el-table-column
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :sortable="column.hasSort"
          v-if="column.isShow"
          :filters="column.filters"
          :filter-method="column.filterMethod"
          :fixed="column.fixed"
        >
          <template slot="header">
            <template v-if="column.headerFormatter">
              <span v-html="column.headerFormatter()"></span>
            </template>
            <template v-else>
              <span>{{ column.label }}</span>
            </template>
          </template>
          <template slot-scope="scope">
            <template v-if="column.columnFormatter">
              <span v-html="column.columnFormatter(scope.row, column, scope.row[column.prop])"></span>
            </template>
            <template v-else>
              <span>{{ scope.row[column.prop] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        :label="actions.title"
        :width="actions.width"
        ref="fixedColumn"
        fixed="right"
        align="center"
        v-if="actions"
      >
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="link in actions.links">
              <el-link
                :key="link.label"
                :underline="false"
                :type="link.type"
                :disabled="link.handleLinkDisabled(scope.row)"
                @click.native="link.handleLinkClick(scope.row)"
                >{{ link.label }}</el-link
              >
            </template>
          </div>
          <div class="operate-group">
            <template v-for="button in actions.buttons">
              <el-button
                :key="button.label"
                :type="button.type"
                :icon="button.icon"
                size="mini"
                :disabled="button.handleButtonDisabled(scope.row)"
                :class="button.handleButtonClassName(scope.row)"
                @click.native="button.handleButtonClick(scope.row)"
                >{{ button.label }}</el-button
              >
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    options: {
      type: Object,
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    expandColumn: {
      type: Object,
      default: () => {}
    },
    actions: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selection: [] // 多选框
    };
  },
  methods: {
    // 处理改变多选框
    handleSelectionChange(value) {
      this.selection = value;
      this.$emit('handleSelectionChange', value);
    }
  }
};
</script>

<style scoped>
.common-table {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-table {
  flex: 1;
}
::v-deep .el-table__body {
  width: 100% !important;
}
::v-deep .el-table__fixed-right-patch {
  box-sizing: content-box;
}
.el-link + .el-link {
  margin-left: 10px;
}
</style>
